<template>
  <div class="org-tree-container">
    <vue2-org-tree :data="treeData" node-key="id" collapsable :render-content="renderContent" @on-expand="onExpand">
    </vue2-org-tree>
  </div>
</template>

<script>
import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'

export default {
  components: {
    Vue2OrgTree
  },
  data() {
    return {
      defaultAvatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png', // 默认头像路径
      treeData: {
        id: 1,
        label: '滁江县城市建设投资集团有限公司',
        name: '李宏宏',
        position: '董事长',
        gender: 'M',
        type: 'company',
        tenure: '2020-2029',
        avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png', // 可以为每个节点设置不同的头像
        children: [
          {
            id: 2,
            label: '三层一会',
            type: 'department',
            children: [
              {
                id: 3,
                type: 'category',
                label: '董事会',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png' // 可以为每个节点设置不同的头像
              },
              {
                id: 4,
                type: 'category',
                label: '党委会',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png'
              },
              {
                id: 5,
                type: 'category',
                label: '监事会',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png'
              },
              {
                id: 6,
                type: 'category',
                label: '总经理办公室',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png'
              }
            ]
          },
          {
            id: 7,
            label: '集团内设部门',
            type: 'department',
            children: [
              {
                id: 8,
                type: 'category',
                label: '投资发展部',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png'
              },
              {
                id: 9,
                type: 'category',
                label: '项目建设部',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png'
              },
              {
                id: 10,
                type: 'category',
                label: '综合事务部',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png'
              },
              {
                id: 11,
                type: 'category',
                label: '计划财务部',
                name: '李宏宏',
                gender: 'M',
                position: '经理',
                tenure: '2020-2029',
                avatar: 'https://static.jeecg.com/temp/%E5%9B%BD%E7%82%AC%E8%BD%AF%E4%BB%B6logo_1606575029126.png'
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //    this.toggleExpand(this.treeData, true) // 默认全部展开事件调用
    // })
  },
  methods: {
    // 节点渲染
    renderContent(e, node) {
      return (
        <div class="custom-node">
          <div class={`${node.type == 'department' ? 'node-header-department' : 'node-header'}`}>
            <div class="node-title">{node.label}</div>
          </div>
          {node.type != 'department' && (
            <div class="node-content">
              <img src={node.avatar || ''} alt="avatar" class="avatar" />
              <div class="info">
                <div class="name">
                  {node.name} ({node.gender})
                </div>
                <div class="position">{node.position}</div>
                <div class="tenure">任期: {node.tenure}</div>
              </div>
            </div>
          )}
        </div>
      )
    },
    collapse(list) {
      var _this = this
      list.forEach(function(child) {
        if (child.expand) {
          child.expand = false
        }
        child.children && _this.collapse(child.children)
      })
    },
    // 展开收起 默认全部收起
    onExpand(e, data) {
      if ('expand' in data) {
        data.expand = !data.expand
        if (!data.expand && data.children) {
          this.collapse(data.children)
        }
      } else {
        this.$set(data, 'expand', true)
      }
    }
    // 默认全部展开
    // toggleExpand(data, val) {
    //   var _this = this
    //   if (Array.isArray(data)) {
    //     data.forEach(function(item) {
    //       _this.$set(item, 'expand', val)
    //       if (item.children) {
    //         _this.toggleExpand(item.children, val)
    //       }
    //     })
    //   } else {
    //     this.$set(data, 'expand', val)
    //     if (data.children) {
    //       _this.toggleExpand(data.children, val)
    //     }
    //   }
    // }
  }
}
</script>

<style scoped lang="less">
.org-tree-container {
  width: 100%;
  height: auto;
  overflow: auto;
  padding: 20px;

  /deep/ .org-tree-node-label-inner {
    padding: 0 !important;
    box-shadow: none !important;
  }
  .custom-node {
    width: 200px;
    border: 1px solid #d3dce6;
    border-radius: 5px;
    background-color: #f5f7fa;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .node-header {
    background-color: #409eff;
    color: white;
    padding: 8px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 14px;
    font-weight: bold;
  }
  .node-header-department {
    height: 40px;
    line-height: 40px;
  }
  .node-content {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .info {
    text-align: left;
  }

  .name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
  }

  .position,
  .tenure {
    font-size: 12px;
    color: #666;
  }
}
</style>

